<template>
	<view @click.stop="handleToClick">
		<wCard marginTop="20">
			<view class="top-item-box">
				<image class="cover" :src="itemData.cover" mode="scaleToFill"></image>
				<view class="top-content">
					<text class="project-title">{{ itemData.name }}</text>
					<text class="project-desc">{{ itemData.remark }}</text>
					<view class="tag-list">
						<tagText v-for="(item, index) in itemData.marks" :key="index" :itemData="item"
							:itemIndex="index" />
					</view>
				</view>
			</view>

			<view class="dividingLine" />

			<view class="bottom-box">
				<text class="strength-desc">{{ itemData.area }}/{{ itemData.project_stage }}/{{
					itemData.financing_amount
				}}</text>
				<image class="smallIcon" src="@/static/project/ic_start_us.png" mode="heightFix"></image>
				<text class="strength-size">{{ itemData.num_favorites }}</text>
				<image class="smallIcon" src="@/static/project/ic_eye.png" mode="heightFix"></image>
				<text class="strength-size">{{ itemData.num_read }}</text>
			</view>

		</wCard>

		<uni-popup ref="popup" type="bottom" background-color="#fff">
			<view class="authorizedDialog">
				<text class="companyName">客满</text>
				<text class="desc">请您授权头像昵称信息，您授权的信息将受到严格保护请放心使用。</text>
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" style="border: none;
		background: white;">
					<view v-if="!avatarUserUrl" class="unauthorized">
						<image class="avatar" src="@/static/personalCenter/ic_not_logged_in.png" mode="widthFix">
						</image>
						<text class="desc">获取头像</text>
					</view>
					<view v-else class="unauthorized">
						<image class="avatar" :src="avatarUserUrl" mode="widthFix"></image>
						<text class="desc"></text>
					</view>
				</button>
				<input name="nickName" v-model="nickName" type="nickname" class="inputNickName" placeholder="请输入昵称"
					@blur="getNickName" />

				<text class="authorizedBtn" @click="handleCheckUserInfo">确认授权</text>
			</view>

		</uni-popup>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue'
	import {
		navigateTo
	} from '@/utils/util.js'

	import {
		getUserInfo,
		updateUserInfo
	} from '@/api/index.js'
	import wCard from './w-card.vue'
	import tagText from './tagText.vue'


	const popup = ref()
	const nickName = ref()
	const avatarUserUrl = ref()
	const userInfoCheck = ref(false)

	const props = defineProps({
		itemData: {
			type: Object,
			default: () => {
				return {}
			}
		},
		itemIndex: {
			type: [Object, Number],
			default: () => {
				return -1
			}
		}
	})
	const emits = defineEmits(['itemClickIndex', 'itemClick'])

	const handleToClick = () => {
		console.log(props.itemData);
		let userInfo = uni.getStorageSync('userInfo') || {};
		checkUserInfo(userInfo)
		if (userInfoCheck.value) {
			if (userInfo.vip_code && userInfo.vip_code > 0) {
				navigateTo({
					url: `/pages/details/index?id=${props.itemData.code}`
				})
				emits('itemClick', props.itemData)
				emits('itemClickIndex', props.itemIndex)
			} else {
				navigateTo({
					url: `/pages/dataManagement/index`
				})
			}
		} else {
			navigateTo({
				url: `/pages/dataManagement/index`
			})
			// openAuthorizedDialog()
		}
	}

	const checkUserInfo = (userInfo) => {
		if (userInfo && userInfo.headimg) {
			avatarUserUrl.value = userInfo.headimg
			nickName.value = userInfo.nickname
			userInfoCheck.value = true
		} else {
			userInfoCheck.value = false
		}
	}

	const openAuthorizedDialog = () => {
		popup.value.open()
	}

	const onChooseAvatar = (e) => {
		const {
			avatarUrl
		} = e.detail
		// avatarUserUrl.value = avatarUrl
		uploadAvatar(avatarUrl)
	}
	const getTokenStorage = () => {
		let token = ''
		try {
			token = uni.getStorageSync('token')
		} catch (e) {}
		return token
	}
	const uploadAvatar = (filePath) => {
		// 调用uni.uploadFile方法上传头像  
		// 全局默认的头信息（方便以后扩展）
		const defaultHeader = {}

		const token = getTokenStorage()
		defaultHeader['api-token'] = token
		defaultHeader['api-name'] = 'wxapp'
		uni.uploadFile({
			url: 'https://qiwu.jfia.cn/data/api.auth.center/upload', // 替换为你的服务器接口地址  
			filePath: filePath,
			header: defaultHeader,
			name: 'file', // 根据你的服务器接口要求设置  
			formData: {
				// 如果需要，可以在这里添加其他表单数据  
			},
			success: (res) => {
				// 处理上传成功的逻辑
				const data = JSON.parse(res.data || "")
				console.log('头像上传成功:', data.code);
				if (data.code) {
					avatarUserUrl.value = data.data.url
				} else {
					uni.showToast({
						icon: "none",
						title: data.info
					})
				}
			},
			fail: (err) => {
				// 处理上传失败的逻辑  
				console.error('头像上传失败:', err);
				uni.showToast({
					icon: "none",
					title: "头像上传失败"
				})
			}
		});
	}


	const getNickName = (e) => {
		nickName.value = e.detail.value
	}

	const handleCheckUserInfo = () => {
		console.log(avatarUserUrl.value);
		console.log(nickName.value);
		const isCheck = avatarUserUrl.value && nickName.value
		if (isCheck) {
			setMineUserInfo()
			popup.value.close()
		}
	}



	const getMineUserInfo = async () => {
		let res = await getUserInfo()
		if (res?.code) {
			console.log("getUserInfo=>", res.data);
			uni.setStorageSync("userInfo", res.data)
			checkUserInfo(res.data)
			if (userInfoCheck.value) {
				navigateTo({
					url: `/pages/dataManagement/index`
				})
			}
		}
	}


	const setMineUserInfo = async () => {
		let res = await updateUserInfo({
			headimg: avatarUserUrl.value,
			nickname: nickName.value,
		})
		if (res?.code) {
			console.log("getUserInfo=>", res.data);
			getMineUserInfo()
		}
	}
</script>
<style lang="scss" scoped>
	.top-item-box {
		display: flex;
		flex-direction: row;

		.cover {
			width: 186rpx;
			margin-left: 24rpx;
			margin-top: 27rpx;
			height: 190rpx;
			border-radius: 10rpx;
			overflow: hidden;
		}

		.top-content {
			flex: 1;
			margin-left: 24rpx;
			height: 190rpx;
			margin-top: 27rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

		}

		.tag-list {
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.project-title {
			font-size: 30rpx;
			color: #061612;

		}

		.project-desc {
			font-size: 26rpx;
			color: #737B79;
			text-overflow: ellipsis;
			overflow: hidden;
		}
	}

	.dividingLine {
		width: 710rpx;
		height: 1rpx;
		margin-top: 24rpx;
		background: #EAE8E8;
		border-radius: 10rpx;
	}

	.bottom-box {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;

		.strength-desc {
			flex: 1;
			margin-left: 25rpx;
			margin-top: 24rpx;
			margin-bottom: 24rpx;
			font-size: 24rpx;
			color: #8D8D8D;
			text-overflow: ellipsis;
			overflow: hidden;
		}

		.strength-size {
			margin-right: 22rpx;
			font-size: 24rpx;
			color: #8D8D8D;
		}

		.smallIcon {
			width: 24rpx;
			margin-right: 8rpx;
			height: 24rpx;
		}

	}



	.authorizedDialog {
		display: flex;
		flex-direction: column;
		align-items: center;

		.companyName {
			width: 690rpx;
			font-size: 48rpx;
			margin-top: 20rpx;
			font-weight: 600;
			color: #1d1d1d;
		}

		.desc {
			width: 690rpx;
			margin-top: 10rpx;
			font-size: 30rpx;
			color: #737B79;
		}


		.unauthorized {
			display: flex;
			margin-top: 40rpx;
			flex-direction: column;
			align-items: center;

			&:active {
				opacity: 0.7;
			}
		}

		.avatar {
			border-radius: 100%;
			overflow: hidden;
			height: 200rpx;
			background-color: #f5f5f5;
			width: 200rpx;
		}

		.inputNickName {
			width: 600rpx;
			margin: 20rpx auto;
			height: 68rpx;
			line-height: 68rpx;
			background: #FFFFFF;
			font-size: 32rpx;
			padding: 0 20rpx;
			border-radius: 10rpx;
			border: 2rpx solid #2462CB;
		}

		button {
			margin: 0;
			padding: 0;
			background-color: inherit;
			position: static;
		}

		button:after {
			content: none;
		}

		button::after {
			border: none;
		}

		.authorizedBtn {
			margin-top: 30rpx;
			margin-bottom: 40rpx;
			width: 640rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #2251A2;
			border-radius: 10rpx;
			font-size: 24rpx;
			text-align: center;
			color: #FFFFFF;
			font-size: 34rpx;

			&:active {
				opacity: 0.7;
			}
		}
	}
</style>